<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>期末项目练习</title>
	<meta http-equiv="x-ua-compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="lib/lib/css/bootstrap.min.css">
	<link rel="stylesheet" href="index.css">

</head>

<body>



	<header>
		<div class="top-bar hidden-xs ">
			<!-- 第一部分 -->
			<div class="container hidden-xs">
				<div class="row ">
					<!-- row下的第1个内容 -->
					<div class="top-bar-1 col-md-3 col-lg-3 col-sm-3 ">
						<div class="dropdown" data-toggle="dropdown">
							<a href="#" class="text-muter btn ">
								<span class="glyphicon glyphicon-modal-window"></span>
								<span>关注微信号<span class="caret"></span></span>
							</a>
						</div>
						<div class="dropdown-menu text-center">
							<!-- <a href="#" >这是一个下拉链接</a> -->
							<img src="images/二维码.png" alt="2.jpg" class="reservation " width="100"
								style="margin-left:25px">
						</div>
					</div>

					<!-- row下的第2个内容 -->
					<div class="top-bar-2 col-md-3 col-lg-2 col-sm-3">
						<i class="glyphicon glyphicon-earphone"></i>
						<span class="text-muter">联系电话：8888</span>
					</div>

					<!-- row下的第3个内容 -->
					<div class="top-bar-3 col-md-3 col-lg-3 col-sm-3 text-center">
						<a href="#" class="text-muted btn top-a-3">旅游社合作</a>
						<a href="" class="text-muted btn top-a-3">景点介绍</a>
					</div>

					<!-- row下的第4个内容 -->
					<div class=" top-bar-3 col-md-3 col-lg-4 col-sm-3">
						<a href="#" class="btn btn-sm btn-regist text-muter">免费注册</a>
						<a href="#" class="btn btn-login text-muter" style="width:33.0%">登录</a>

						<a href="#" class="btn btn-md btn-search" id="search"><span class="glyphicon glyphicon-search"
								style="font-size: 19px;"></span>
						</a>

					</div>
				</div>

			</div>
		</div>

		<div class="top-bar " id="searchKuang" style="display: none;">
			
			<div class="container ">
				<div class="row ">
					<div class="col-lg-6 col-md-6 col-lg-6 col-sm-6 ">
					
						<div class="container search" >
							<div class="search-input">
								<div class="input-group">
									<input type="text" class="form-control" id="txtKeyword" placeholder="输入关键字："
										value="">
									<span class="input-group-btn" >
										<button class="btn btn-default" id="btnSearch" type="button" style="margin-top:-5px">
											<span class="glyphicon glyphicon-search"></span>
										</button>
									</span>
								</div>
							</div>
						</div>


					</div>
				</div>
			</div>
		</div>



	</header>


	<!-- 导航图 -->
	<img src="images/top_banner.jpg" alt="" width="100%"">



	<!-- 第二部分  汉堡按钮 -->
<nav class=" navbar navbar-default container" role="navigation">

	<div class="navbar-header">
		<a class="navbar-brand" href="#"><img style="width: 120px;margin-top: -20px;" src="images/tongcheng-logo.png">
		</a>

		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"
			aria-expanded="false">
			<span class="sr-only" collapsed" data-toggle="collapse">汉堡按钮</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>

	</div>

	<div class="collapse navbar-collapse" id="navbar-collapse">
		<ul class="nav navbar-nav nav-new3">
			<li class="active"><a href="##">热门景点</a></li>
			<li><a href="##">旅游攻略</a></li>
			<li><a href="##">景区旅游</a></li>
			<li><a href="##">关于我们</a></li>
		</ul>

		<ul class="nav navbar-nav navbar-right hidden-xs hidden-sm">
			<li class="geRenZhongXin">{{timer |  nowtime}}</li>
		</ul>
	</div>
	</nav>



	<!-- 第三部分  轮播图 -->
	<section id="carousel">

		<div class="carousel slide" id="lunbo">

			<!-- 圆点 -->
			<ol class="carousel-indicators">
				<li data-target="#lunbo" data-slide-to="0" class="active"> </li>
				<li data-target="#lunbo" data-slide-to="1"></li>
				<li data-target="#lunbo" data-slide-to="2"></li>
			</ol>

			<!-- 图片 -->
			<div class="carousel-inner">
				<div class="item active" data-sm-img='images/ban1_640_340.jpg'
					data-lg-img='images/ban1_2000_400.jpg '>
				</div>

				<div class="item " data-sm-img='images/ban1_640_340.jpg' data-lg-img='images/ban1_2000_400.jpg '>
				</div>

				<div class="item" data-sm-img='images/ban1_640_340.jpg' data-lg-img='images/ban1_2000_400.jpg '>
				</div>
			</div>

			<!-- 上下张按钮 -->
			<a class="left carousel-control" href="#lunbo" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>

			<a href="#lunbo" class="right carousel-control" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>


		</div>
	</section>
	<!-- /轮播图 -->


	<!-- 热门景点展示 -->
	<div class="container ">
		<div class="row" id="hot">
			<!-- <div class="col-md-12"> -->
			<div class="col-md-3 col-sm-6 col-xs-6">
				<h3>肇庆星湖</h3>
				<a href="#"><img src="images/col-1.jpg" style="width: 240px;height: 135px;"></a>
				<h4 class="glyphicon glyphicon-thumbs-up">两种旅游方案可供选择
				</h4>
				<h4> ￥500.00</h4>
			</div>
			<div class="col-md-3 col-sm-6 col-xs-6">
				<h3>广州塔</h3>
				<a href="#"><img src="images/col-7.jpg" alt=""></a>
				<h4 class="glyphicon glyphicon-thumbs-up">两种旅游方案可供选择
				</h4>
				<h4> ￥500.00</h4>
			</div>
			<div class="col-md-3 col-sm-6 col-xs-6">
				<h3>佛山西樵</h3>
				<a href="#"><img src="images/col-6.jpg" alt=""></a>
				<h4 class="glyphicon glyphicon-thumbs-up">两种旅游方案可供选择
				</h4>
				<h4> ￥500.00</h4>
			</div>
			<div class="col-md-3 col-sm-6 col-xs-6">
				<h3>阳江海陵岛</h3>
				<a href="#"><img src="images/col-5.jpg" alt=""></a>
				<h4 class="glyphicon glyphicon-thumbs-up">两种旅游方案可供选择
				</h4>
				<h4> ￥500.00</h4>
			</div>

			<!-- </div> -->
		</div>
	</div>
	<!-- /景点展示 -->


	<!-- 选项卡 -->
	<div class="container">
		<div id="xuanXiangKa">
			<div class="row xuanXiangKa-div1">
				<div class="col-md-12">

					<div class="navbar-header hidden-xs">
						<a href="#" id="xihao" class="text-muted  navbar-header">根据你的喜好推荐</a>
					</div>


					<ul class="nav nav-pills navbar-right" role="tablist" id="tab-hover">
						<li role="presentation" class="active"><a href="#caipin" data-toggle="tab" role="tab">广东</a>
						</li>
						<li role="presentation"><a href="#tab2" data-toggle="tab" role="tab">广西</a></li>
						<li role="presentation"><a href="#tab3" data-toggle="tab" role="tab">贵州</a></li>
					</ul>
				</div>
			</div>

			<div class="row xuanXiangKa-div">
				<div class="col-md-12 text-center tab-content">
					<!-- tab1 -->
					<div class="tab-pane active" id="caipin"  style="min-height: 440px;">
						<div class="col-lg-4  col-md-4 col-sm-4 col-xs-4">
							<img src="images/tab-img-6.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-4  col-md-4 col-sm-4 col-xs-4">
							<img src="images/tab-img-1.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-4  col-md-4 col-sm-4 col-xs-4">
							<img src="images/tab-img-2.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-4  col-md-4 col-sm-4 col-xs-4">
							<img src="images/tab-img-3.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-4  col-md-4 col-sm-4 col-xs-4">
							<img src="images/tab-img-4.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-4  col-md-4 col-sm-4 col-xs-4">
							<img src="images/tab-img-5.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-md-12 text-center"  >
							<a href="#" class="btn btn-search" style=" width: 100%;"> 换一批</a>
						</div>
					</div>

					<!-- tab2 -->
					<div class="tab-pane" id="tab2" style="min-height: 440px;">
						<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
							<img src="images/tab-img-6.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
							<img src="images/tab-img-6.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
							<img src="images/tab-img-6.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
							<img src="images/tab-img-6.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
							<img src="images/tab-img-6.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
							<img src="images/tab-img-6.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-md-12 text-center"  ">
							<a href="#" class="btn btn-search" style=" width: 100%;"> 换一批</a>
						</div>
					</div>

					<!-- tab3 -->
					<div class="tab-pane" id="tab3" style="min-height: 440px;">
						<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
							<img src="images/tab-img-1.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
							<img src="images/tab-img-2.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
							<img src="images/tab-img-6.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
							<img src="images/tab-img-5.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
							<img src="images/tab-img-5.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
							<img src="images/tab-img-5.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
							<img src="images/tab-img-5.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
							<img src="images/tab-img-5.jpg" width="120" alt="">
							<h4>星湖环岛游</h4>
							<h4>￥99.9</h4>
						</div>
						<div class="col-md-12 text-center"  >
							<a href="#" class="btn btn-search" style=" width: 100%;"> 换一批</a>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>



	<!-- 产品特色 -->
	<section id="product">
		<div class="container">
			<div class="row">
			
		
		<!-- 头部选项 -->
			<ul id="myTab" class="nav nav-tabs">
				<li class="active">
					<a href="#home" data-toggle="tab">周边游</a>
				</li>
				<li>
					<a href="#ios" data-toggle="tab">省内游</a>
				</li>
		
				<li class="dropdown">
					<a href="#java" data-toggle="tab">自驾游</a>
				</li>
		
				<li class="pull-right hidden-xs hidden-sm" ><a href="#python" data-toggle="tab">更多</a></li>
		
			</ul>
		
		<!-- 展示内容 -->
			<div id="myTabContent" class="tab-content">
				<div class="tab-pane fade in active " id="home" style="min-height: 405px;">
					<div class="container">
						<div class="row">
							<div class="col-md-8">
							<!-- 第一部分 -->
								<div class="pd-one-1 media">
										<!-- 媒体对象左边，垂直居中 -->
										<a href="#" class="media-left media-bottom">
											<img src="images/tianzhidao.png" width="140" height="140">
										</a>
		
										<div class="media-body " >
											<h2 style="margin:30px 15px 10px 15px;" class="media-heading">欢迎来到周边游攻略</h2>
											<h2 class="media-heading">这里为你分析周边游景点</h2>
										</div>
								</div>
								<!-- 第二部分 -->
									<ol id="pd-one-2" class="breadcrumb lead" style="width: 600px;">
										<li><a href="">古兜温泉</a></li>
										<li><a href="">银盏温泉</a></li>
										<li><a href="">山泉湾温泉</a></li>
										
									</ol>
				
		
								<!-- 第三部分 -->
									<h1 > 盘点周边热门景点 <strong>周边自驾</strong></h1>
								<!-- 第四部分 -->
									<div id="pd-one-4">
										<button class="btn btn-default btn-lg" role="button">电话咨询</button>
										<button class="btn btn-default btn-lg" role="button">了解更多</button>
									</div>
							</div>
							<div class="col-md-4 visible-md visible-sm visible-xs"><!--小屏幕时 -->
								<img src="images/pro2.jpg"  class="img-responsive" style="max-width: 100%;height: 403px;width:500 ;">
							</div>
							
							 <div class="col-md-4 visible-lg"><!--大屏幕时 -->
								<img src="images/pro2.jpg"  class="img-responsive" style="max-width: 130%;margin-left:-30%;height: 403px; ">
							</div>

						</div>
					</div>
				</div>
		
				<!-- 标签面板第二块 -->
				<div class="tab-pane fade" id="ios" style="min-height: 405px;">
					<div class="container">
						<div class="row">
							<div class="col-md-4">
								<img src="images/pro1.jpg" style="max-width: 130%;height: 403px;" class="img-responsive">
							</div>
							<div class="col-md-7 col-md-offset-1 ">
								<h1 class="text-warning"> 常州太湖露营谷</h1>
								<p class="lead">品质游+299元起抢常州太湖露营谷小型房车或木屋房车住宿1晚+双人早餐+露营谷门票2张房车宿营 生态游乐2日自由行</p>
							</div>
		
						</div>
					</div>
				</div>
		
				<div class="tab-pane fade" id="java" style="min-height: 405px;">
					<div class="container">
						<div class="row">
							<div class="col-md-7">
								<h1><strong class="text-danger">自驾游：周边热点.即刻出发</strong></h1>
								<h3><span class="text-warning"> 【自驾】</span> </h3>
								<h4 class="text-muted">莫干山开元森泊春季闪促套餐+户外游乐+头号玩家+芙洛拉花园+动物农场-哇里哇国双床房/高级双床房</h4>
								<div class="badge" style="height: 30px;font-size:20px">3000+攻略 | 1W+人订阅</div>
							</div>
		
							<div class="col-md-5 ">
								<img src="images/pro3.jpg" style="height: 300px;width:100%" class="img-responsive">
							</div>
						</div>
					</div>
				</div>
		
				<div class="tab-pane fade" id="python"  style="min-height: 405px;">
					<h1>这里是更多的内容</h1>
				</div>
			</div>
		
		
		
			</div>
		
		</div>
		
		
		
		
		
	</section>
		<!-- /产品特色 -->
		
<br>
	<!-- 脚部 -->

	<footer>
		<div class="container">
			<div class="footer-left">
				<p>Copyrights © 2016 Bootstrap 响应式餐饮网站 | 版权所有</p>
			</div>
			<div class="footer-right">
				<ul>
					<li>
						<a href="#" class="btn"><i class="glyphicon glyphicon-phone-alt"></i>联系我们</a>
					</li>
					<li>
						<a href="#" class="btn"><i class="glyphicon glyphicon-map-marker"></i>联系地址</a>
					</li>
					<li>
						<a href="comment.html" class="btn"><i class="glyphicon glyphicon-question-sign"></i>反馈留言</a>
					</li>
				</ul>
			</div>
		</div>

	</footer>











	


	<script src="vue.js"></script>
	<script src="lib/jquery/jquery-1.11.0.min.js"></script>
	<script src="lib/lib/js/bootstrap.min.js"></script>
	<script src="index.js"></script>

	<script type="text/javascript">

		Vue.filter("nowtime", function (dataStr, pattern = "") {
			var time = new Date()
			var nian = time.getFullYear()
			var yue = time.getMonth() + 1
			var ri = time.getDate()
			var week = time.getDay()

			var hh = time.getHours()
			var mm = time.getMinutes()
			var ss = time.getSeconds()

			// 将星期几的阿拉伯数字转换为中文
			switch (week) {
				case (1): week = "一"; break;
				case (2): week = "二"; break;
				case (3): week = "三"; break;
				case (4): week = "四"; break;
				case (5): week = "五"; break;
				case (6): week = "六"; break;
				case (0): week = "日"; break;//没有7，星期日的代号为 0，在西方，0（星期日）为一周的开始
			}
			return `${nian}年${yue}月${ri}日   周${week} --- ${hh}:${mm}:${ss}`
		})

		var app = new Vue({
			el: "#navbar-collapse",
			data: {
				timer: ""
			}
		})

	</script>



</body>

</html>